<script setup lang='ts'>
// 列信息- 标题 - 字段
// vue3.5+
type PersonItem = { id: number, username: string, age: number }

const { columns = [], data = [] } = defineProps<{
    columns?: Array<{ label: string,field: keyof PersonItem}>, // 列信息
    data?: Array<PersonItem> // 数据
}>()
</script>

<template>
    <table border="1">
        <thead>
            <!-- [{ label: '中文',field: '英文字段' }] -->
            <th align="center" v-for="item in columns" :key="item.field">{{ item.label }}</th>
        </thead>
        <tbody>
            <tr v-for="(item, index) in data" :key="item.id">
                <!-- <td>{{ item[columns[0].field] }}</td>  =》 item["id"] item["username"] item["age"] -->
                <td>{{ item[columns[0].field] }}</td>
                <td>{{ item[columns[1].field] }}</td>
                <td>{{ item[columns[2].field] }}</td>
                <td>
                    <!-- 操作 -->
                    <slot name="row" :row="item"></slot>
                    <!-- 循环了三次 <slot row={ 具体的数据 } > -->
                </td>
            </tr>
        </tbody>
    </table>
</template>

<style scoped>
table thead {
    background-color: #3972f6;
    color: #fff;
}

table thead th,
table td {
    width: 100px;
    text-align: center;
}
</style>